<script setup>

import { ref } from 'vue'

import TwoImages from '@/components/common/TwoImages.vue'

import StepTitleDescription from '@/components/common/StepTitleDescription.vue'

const draperyRod = ref([
  {
    title: "YES",
    image: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A4Step2y.svg", // Replace with actual path
    description: "I have a rod installed already."
  },
  {
    title: "NO",
    image: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A5Step2N.svg", // Replace with actual path
    description: "I don't have a rod installed yet <br> (For more accurate measurement, we strongly recommend you have the rod or track installed)"
  },
]);

const stepTitleDescription = ref({
  "title": "Step 2",
  "description": "Do you have a drapery rod installed already?",
});

const emit = defineEmits(["selected"]);

const selected = (index) => {
  emit('selected', index);
}

</script>

<template>
  <div class="container">
    <StepTitleDescription :title-and-description="stepTitleDescription"/>
    <div class="inner-container">
      <TwoImages :drapery-rod-installed="draperyRod" @selected="selected"/>
    </div>
  </div>

</template>

<style scoped>

.container {
  width:100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.inner-container {
   width: 60%;
  margin: 0 auto;
}

</style>